<!-- 目标区的典型地质区划图-面 -->
<template>
    <el-drawer v-model="addDrawer" size="45%" :show-close="false" @opened="openDrawer" @close="closeDrawer">
        <template #title>
            <h2><svg-icon icon-class="list"></svg-icon><span style="padding-left: 15px">{{ typeName }}</span></h2>
            <el-button type="primary" @click="confirmClick" :disabled="drawerLoading" v-if="isShowSave">保存</el-button>
            <el-button type="primary" @click="closeDrawer">关闭</el-button>
        </template>
        <template #default>
            <el-form :model="form" ref="addRef" :inline="true" :rules="formRules" label-width="140px"
                v-loading="drawerLoading">
                <el-row justify="space-between">
                    <el-form-item label="省">
                        <el-input v-model="form.province" clearable disabled></el-input>
                    </el-form-item>
                    <el-form-item label="市">
                        <el-input v-model="form.city" clearable disabled></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="区/县">
                        <el-input v-model="form.county" clearable disabled></el-input>
                    </el-form-item>
                    <el-form-item label="典型地质区编号" prop="id">
                        <el-input v-model="form.id" placeholder="请输入典型地质区编号" clearable maxlength="17"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="区内地层描述" prop="layerComment" style="width:100%">
                        <el-input v-model="form.layerComment" placeholder="请输入区内地层描述" :autosize="{ minRows: 3, maxRows: 6 }"
                            type="textarea" show-word-limit maxlength="40" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="标准时程波图" prop="stwveGraphArwid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.stwveGraphArwid" placeholder="标准时程波图" clearable
                                maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="stwveGraphArwidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <FileUpload v-model="form.stwveGraphArwidName" @uploadFile="uploadSuccess('stwveGraphArwid', $event)"
                                @delFile="deleteFile('stwveGraphArwid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="标准时程波文件" prop="stwveFileArwid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.stwveFileArwid" placeholder="标准时程波文件" clearable
                                maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="stwveFileArwidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <FileUpload v-model="form.stwveFileArwidName" @uploadFile="uploadSuccess('stwveFileArwid', $event)"
                                @delFile="deleteFile('stwveFileArwid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="加速度反应谱图" prop="resAgraphArwid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.resAgraphArwid" placeholder="加速度反应谱图" clearable
                                maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="resAgraphArwidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <FileUpload v-model="form.resAgraphArwidName" @uploadFile="uploadSuccess('resAgraphArwid', $event)"
                                @delFile="deleteFile('resAgraphArwid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="加速度反应谱文件" prop="resAfileArwid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.resAfileArwid" placeholder="加速度反应谱文件" clearable
                                maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="resAfileArwidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <FileUpload v-model="form.resAfileArwidName" @uploadFile="uploadSuccess('resAfileArwid', $event)"
                                @delFile="deleteFile('resAfileArwid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="速度反应谱图" prop="resVgraphArwid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.resVgraphArwid" placeholder="速度反应谱图" clearable
                                maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="resVgraphArwidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <FileUpload v-model="form.resVgraphArwidName" @uploadFile="uploadSuccess('resVgraphArwid', $event)"
                                @delFile="deleteFile('resVgraphArwid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="速度反应谱文件" prop="resVfileArwid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.resVfileArwid" placeholder="速度反应谱文件" clearable
                                maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="resVfileArwidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <FileUpload v-model="form.resVfileArwidName" @uploadFile="uploadSuccess('resVfileArwid', $event)"
                                @delFile="deleteFile('resVfileArwid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="位移反应谱图" prop="resDgraphArwid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.resDgraphArwid" placeholder="位移反应谱图" clearable
                                maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="resDgraphArwidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <FileUpload v-model="form.resDgraphArwidName" @uploadFile="uploadSuccess('resDgraphArwid', $event)"
                                @delFile="deleteFile('resDgraphArwid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="位移反应谱文件" prop="resDfileArwid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.resDfileArwid" placeholder="位移反应谱文件" clearable
                                maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="resDfileArwidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <FileUpload v-model="form.resDfileArwidName" @uploadFile="uploadSuccess('resDfileArwid', $event)"
                                @delFile="deleteFile('resDfileArwid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="备注" prop="commentInfo" style="width:100%">
                        <el-input v-model="form.commentInfo" placeholder="请输入备注" :autosize="{ minRows: 6, maxRows: 12 }"
                            type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
        </template>
    </el-drawer>
</template>
<script setup>
// 引入基础方法
import useSpatialData from '@/hooks/useSpatialData';
// 引入表单验证规则
import { eightDouble, fourInt } from '@/utils/validate';
const { route, addDrawer, drawerLoading, form, typeName, openDrawer, closeDrawer, confirmClick, uploadSuccess, deleteFile, isShowSave } = useSpatialData();
// 表单验证规则
const formRules = {
    id: [{ required: true, message: '请输入典型地质区编号！', trigger: 'blur' }],
}
</script>
<style lang="scss" scoped></style>